<!DOCTYPE HTML>
<html>

<head>
	<meta charset="UTF-8">
	<title>moonJs demo</title>
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
	<style>
		html,
		body,
		p,
		div {
			margin: 0;
			padding: 0;
		}
	</style>
</head>

<body>
	<script src='../libs/easeljs.js'></script>
	<script src="../libs/createui.js"></script>
	<script src="../libs/createEvent.js"></script>
	<canvas id='canvas' width=1000 height=600></canvas>
	<script>
		mColor.colorNormal = '#224511';
		mColor.colorOver = '#006660';
		mColor.colorDown = '#0037AE';
		mColor.colorFont='#dddddd';
		mColor.colorBack='#004500';
	    mColor.colorFront='#57FF60';
		uiconfig.roundAngle = 10;
		// var stage=new createjs.Stage(document.getElementById('canvas'));
		// createjs.Ticker.framerate = 60;
		// createjs.Ticker.addEventListener("tick",(e)=>{
		// 	stage.update();
		// });
		// createui.init(stage);

		var canvas=document.getElementById('canvas');
		var stage = createui.initStage(canvas, loop);
		var sceneLayer = new MScene({});
		stage.addChild(sceneLayer);

		var scenes = [];
		var tabbar = new MTabbar();
		stage.addChild(tabbar);
		tabbar.setPos(850, 10);
		tabbar.setCallBack((id) => { sceneLayer.removeAllChildren();sceneLayer.addChild(scenes[id]); })
		for (let i = 0; i < 5; i++) {
			tabbar.addItem(new MButton({ label: '场景' + parseInt(i + 1) }));
			let scene = new MScene({});
			scenes.push(scene);
		}
		//console.log(sceneLayer)
		tabbar.select(0);
		tabbar.displayRank(tabbar.getItems(), 1, 5, 5);

		var scene = scenes[0]
		var btn = (new MButton({})).setPos(0, 0);
		btn.setWH(200, 100).updateSkin();
		btn.setText('这只是一个测试按钮')//.setScale(2).setAlpha(0.5).setRotation(45);
		scene.addChild(btn);
		btn.setEnabled(false);
		btn.addEventListener("click", function (evt) {
			btn.x++;
		});
		var panel = new MAlert({ width: 300, height: 100 });
		panel.setPos(10, 200);
		panel.setText('这只是一个测试\n这只是一个测试');
		scene.addChild(panel);

		let circle = new MShape();
		circle.beginFill('#f00').drawCircle(500, 550, 20);
		scene.addChild(circle);


		var panel = new MSureCancel({ width: 300, height: 160 });
		panel.setPos(10, 400);
		panel.setText('这只是一个测试\n这只是一个测试');
		panel.addEventListener(cuiEvent.sureCalcel, (evt) => { console.log(evt.target.type) })
		//panel.noEventBg();
		scene.addChild(panel);
		///panel.addChild(new MButton({}).setPos(50,85))

		var panel = new MWindow({ width: 300, height: 300 });
		panel.setPos(450, 200);
		scene.addChild(panel);
		panel.addItem(new MButton({}).setPos(-20, -10));
		panel.addItem(new MButton({ label: '切换场景' }).setPos(260));
		panel.addItem(new MButton({ label: '提示' }).setPos(-20, 240).setCallBack(this.setTip));
		panel.addItem(new MButton({ label: '购买' }).setPos(250, 240).setCallBack(this.buyHandler));
		panel.displayRank(panel.getItems(), 2, 5, 5, 10, 10);
		panel.startDrag();
		var node=new MSprite();
		node.setPos(100,150).dps(30,5,2)
		panel.addItem(node);
		node.startDrag();
		//panel.addItem(new MShape({}).beginFill('#f00').drawRect(0,0,400,400));

		tabbar = new MTabbar();
		scene.addChild(tabbar);
		tabbar.setPos(250, 150);
		for (let i = 0; i < 5; i++) tabbar.addItem(new MCircleButton({ label: i + 1, radius: 15 }));
		tabbar.select(0);

		var cBtn = new MCircleButton({})
		cBtn.setPos(250, 60)
		scene.addChild(cBtn);

		var cnt = 1;
		function setTip() {
			MUtil.warn('提示' + cnt++)
			MTween.by(btn, { x: 100, y: 100, alpha: -0.1, rotation: 45 }, 1000)
		}


		//MUtil.alert('提醒你要关闭了')
		function buyHandler() {
			MUtil.sureCancel('你确定要购买吗？', (type) => {
				if (type) {
					MUtil.warn('购买成功')
				}
			})
		}
//---------------scene2-----------------------

		var scene2 = scenes[1];
		var scorll = new MScorll({ width: 200, height: 200 }).setPos(10, 10)
		scene2.addChild(scorll);
		var layer = (new MLayer({ width: 200, height: 800 }))//.setWH(200,600).updateSkin();
		scorll.addItem(layer);
		layer.skinBg.alpha = 0.01;
		for (var i = 0; i < 20; i++) {
			layer.addChild(new MButton({ label: '按钮' + i }).setPos(10, 10 + i * 40).setColor({ down: '#0000ff' }))
		}

		var tc = new MToggleContainer({ type: 1 });
		tc.create(['1', '2', '3']);
		tc.setPos(200, 100);
		scene2.addChild(tc);
		tc.select(1);
		tc.addEvent(mConst.CHANGE, (e) => { console.log(e.target.index) })

		tc = new MToggleContainer({ type: 2 });
		tc.setSkinColors('red','pink','blue')
		tc.create(['1', '2', '3']);
		tc.setPos(300, 100);
		tc.setLabelPos(-5,1)
		scene2.addChild(tc);
		tc.addEvent(mConst.CHANGE, (e) => { console.log(e.target.indexs) })

		//---------------scene3-----------------------

		var scene3 = scenes[2];
		var role = new MLayer({ width: 20, height: 30 });
		scene3.addChild(role);
		role.setPos(300, 300);
		MEvent.addKeyboard();
		function loop() {
			for (let key in MEvent.keyValue) {
				let value = MEvent.keyValue[key];
				if (value == 1 || value == 2) {
					switch (key) {
						case 'a':
							role.x -= 2 * value;
							break;
						case 'd':
							role.x += 2 * value;
							break;
					}
				}
			}
		}
		scene3.addEventListener('click', (e) => {
			MTween.to(role, { x: 100 }, 1000)//连续的动画
			progress.value += 0.1;
		});
		var progress = new MProgress({});
		progress.value = 0.1;
		scene3.addChild(progress);

		var slide = new MSlide({ r: 10 });
		slide.value = 0.4;
		slide.setPos(50, 50);
		scene3.addChild(slide);

		slide=new MSlide({width:300,r:10});
		slide.setSkinColors('#2196F3','#0D82E1','#7FD4FF');
		slide.value=0.5;
		slide.setPos(400,50);
		scene3.addChild(slide);

		progress = new MProgress({width:300,r:10});
		progress.setSkinColors('#0D82E1','#7FD4FF');
		progress.value = 0.1;
		progress.setPos(400,5);
		scene3.addChild(progress);

		var rects = [];
		for (let i = 0; i < 20; i++) {
			var rect = new MLayer({ width: 20, height: 30 });
			scene3.addChild(rect);
			rects.push(rect);
		}
		var [cx, cy] = [200, 200];
		//console.log(cx,cy)
		scene3.centerLayout(rects, 5, 10, 10, cx, cy);

		var point = new MShape();
		point.beginFill('red').drawCircle(cx, cy, 2)
		scene3.addChild(point);

		var toggle = new MToggle({});
		toggle.setPos(350, 250);
		scene3.addChild(toggle);
		toggle.callBack = (node) => {
			console.log(node.value)
		}
		var toggle = new MToggle({});
		toggle.setSkinColors('red','blue')
		toggle.setPos(450, 250);
		scene3.addChild(toggle);
//---------------scene4-----------------------

		var scene4 = scenes[3];
		let colPoint=new MStroke();
		colPoint.setPos(100,100);
		colPoint.dr(20,48,4,'black');
		scene4.addChild(colPoint);

		colPoint=new MStroke();
		colPoint.setPos(200,100);
		colPoint.dc(20,10,'red');
		scene4.addChild(colPoint);

		colPoint=new MStroke();
		colPoint.setPos(300,100);
		colPoint.drr(40,100,10,10,'blue');
		scene4.addChild(colPoint);

		//方法1,麻烦
		colPoint=new MShape();
		colPoint.setPos(50,300);
		colPoint.beginFill('blue').setLineSizeAndColor(10,'red').drawRect(0,0,100,100,'blue');
		scene4.addChild(colPoint);

		//方法2,简单
		colPoint=new MShape();
		colPoint.setPos(200,300);
		colPoint.dr(100,100,'blue',{s:10,c:'red'});
		scene4.addChild(colPoint);

		//方法1,麻烦
		colPoint=new MShape();
		colPoint.setPos(400,100);
		colPoint.g.beginStroke('white');
		colPoint.beginFill('black').arc(0,0,100,0,Math.PI/2)
		scene4.addChild(colPoint);

		//方法2,简单
		colPoint=new MShape();
		colPoint.setPos(400,250);
		colPoint.da(60,0,Math.PI/4,'red');
		scene4.addChild(colPoint);

		colPoint=new MShape();
		colPoint.setPos(500,50);
		colPoint.dp(30,5,'yellow')
		scene4.addChild(colPoint);

		colPoint=new MShape();
		colPoint.setPos(550,150);
		colPoint.rotation=180;
		colPoint.dp(30,3,'red',{s:1,c:'yellow'});
		scene4.addChild(colPoint);


		var cBtn = new MCircleButton({label:''})
		cBtn.setPos(50, 450)
		colPoint=(new MShape()).dp(15,3,'white').setPos(30,30);
		colPoint.rotation=-90;
		cBtn.addChild(colPoint)
		scene4.addChild(cBtn);

		var cBtn = new MCircleButton({label:''})
		cBtn.setPos(150, 450)
		colPoint=(new MShape()).dr(20,20,'white').setPos(20,20);
		cBtn.addChild(colPoint)
		scene4.addChild(cBtn);

		
		var mBtn=new MMoreButton((new MCircleButton({label:'开始'})),(new MCircleButton({label:'停止'})));
		mBtn.setPos(300, 450)
		scene4.addChild(mBtn);

		//---------------scene5-----------------------

		var scene5 = scenes[4];
		var btn=new MButton({});
		scene5.addChild(btn);
		var btn=new MButton({});
		btn.setPos(100,10).setSkinColors('red','green','black')
		btn.cbDown=(e)=>{MUtil.warn('按钮被按下')}
		btn.cbUp=(e)=>{MUtil.warn('按钮弹起来')}
		//console.log(btn)
		scene5.addChild(btn);

		var label=new MLabel({});
		label.setPos(220,20);
		scene5.addChild(label);
		label.color='red';
		label.fontSize=30;
		label.startDrag();

		var image=new MImage({url:'https://ywx620.gitee.io/learn/rec/star/moon.png'});
		image.setPos(20,100);
		// image.startDrag();
		scene5.addChild(image);

		var node=new MSprite();
		scene5.addChild(node.setPos(100,100).dc(60));
		node.addChild((new MSprite).setPos(-25,-20).de(20,10,'black'));
		node.addChild((new MSprite).setPos(25,-20).de(20,10,'black'));
		node.startDrag();
		var face=node;

		var node=new MCircleButton({label:'开始动画',radius:60});
		node.setSkinColors('#2196F3','#118DF2','#0D82E1');
		node.set({x:200,y:200});
		node.callBack=onClick;
		scene5.addChild(node);
		function onClick(){
			MTween.timeLine([
				[100,{type:'to',item:node,data:{x:400,y:200},time:500}],
				[100,{type:'to',item:node,data:{x:400,y:400},time:500}],
				[100,{type:'to',item:node,data:{x:200,y:400},time:500}],
				[100,{type:'to',item:node,data:{x:200,y:200},time:500}]
			]);
			MTween.by(image,{x:50,y:50},100,()=>{console.log(image.x,image.y)});
			//MTween.to(btn,{x:150,y:150},100);
			let t=500;
			MTween.set(btn,'by')
			.go(t,{x:200})
			.go(t,{y:200})
			.go(t,{x:-200})
			.go(t,{y:-200})
			.start()
			//MTween.set(btn,'by').go(500,{x:100,y:100}).go(500,{x:-100,y:100})
			MTween.set(face,'to',()=>{console.log('over')}).go(100,{scale:0.5}).go(1000).go(1500,{scale:1}).start()
		}
		btn.addEventListener('click',(e)=>{
			console.log(e.stageX,e.stageY);
			let [x,y]=[e.stageX,e.stageY];
			console.log(x,y)
		});

	</script>
</body>

</html>